<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>FaceBook</title>

	<link rel="stylesheet" href="./css/bootstrap.css">
	<link rel="stylesheet" href="./css/font-awesome.min.css">
	<link rel="stylesheet" href="./css/main.css">

	<script src="./js/jquery.min.js"></script>
	<script src="./js/bootstrap.min.js"></script>

	<!-- umeditor -->
	<link href="umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
	<script type="text/javascript" src="umeditor/umeditor.config.js"></script>
	<script type="text/javascript" src="umeditor/umeditor.min.js"></script>
    <script type="text/javascript" src="umeditor/lang/zh-cn/zh-cn.js"></script>

</head>
<body>

	<header class="topbar navbar-default navbar-fixed-top row">

		<!-- logo -->
		<a href="" class="col-sm-1 col-md-1" style="text-align:right;padding-right:0.6em;">
			<i class="icon-2x icon-facebook-sign" style="color:white;"></i>
		</a>

		<!-- search -->
		<form class="form-inline col-sm-4 col-md-4 hidden-xs" role="form">
		  <div class="form-group-sm ">
		    <div class="input-group col-sm-12" >
		      <input class="form-control" type="text" placeholder="用户名">
		      <div class="input-group-addon" width="10%"> <i class="icon-search"></i> </div>
		    </div>
		  </div>
		</form>
		
		<!-- list -->
		<ul class="col-sm-5 nav-list col-md-offset-2 hidden-xs" >
			<li style="border-right:1px solid #365089;">
			    <a href="#">
			      <img src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg" alt="" width="30px" height="30px">
			    </a>
			    bool
			</li>
			<li>
				<a href="">首页</a>
			</li>
		  <li>
		 	<lable class="icon-large icon-user"></lable>	
		    <!-- <span class="badge">14</span> -->
		  </li>
		  <li>
		 	<lable class="icon-large icon-comments"></lable>	
		  </li>	
		  <li>
		 	<lable class="icon-large icon-globe"></lable>	
		  </li>	
		  <li style="border-left:1px solid #365089;">
		 	<lable class="icon-large icon-lock" style="color:gray;"></lable>	
		  </li>	
	       <li class="dropdown">
	          <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:gray;">  <span class="caret"></span></a>
	          <ul class="dropdown-menu" role="menu">
	            <li><a href="#">资料</a></li>
	            <li><a href="#">注销</a></li>
	            <li><a href="#">帮助</a></li>
	            <li><a href="#">反馈</a></li>
	          </ul>
	        </li>   		  	  
		</ul>
	
	</header>

  <!-- main -->
  <div class="container row " style="margin-top:4em;">




	<!-- comment -->
	<div class="col-sm-8 col-md-8 message-list" style="margin-left:6%;" >

		<div class="col-xs-12 col-sm-12 col-md-12">
			<ul class="col-xs-12 col-sm-12 col-md-12">

				<li>
					<strong>通知</strong>
				</li>
				<li style="border-bottom:none;">
					<strong style="font-size:12px;color:#90949C;">用其他方式接收通知：</strong> 
					<a href="" style="font-size:12px;">手机短信</a>
				</li>

				<!-- list -->
				<li class="pull-left">					
					<a href="" class="pull-left"> <img src="./php.jpg" alt="" width="35px" height="35px" > </a>	

					<div class="pull-left">
						<a href=""> <strong> 布尔</strong> 回复你对他的评论</a> <br>
						<p style="color:#90949C;font-size:12px;">
							<i class="icon-thumbs-up"></i> 3小时前 <br>
						</p>
					</div>
					
					<!-- 菜单 -->
					<div class="dropdown pull-right" >
			          <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:gray;">  
			          	<span class="icon-angle-down" style="text-decoration:none;"></span>
			          </a>
			          <ul class="dropdown-menu" role="menu">
			            <li><a href="#"> 发消息</a></li>
			            <li><a href="#" > 照片</a></li>
			            <li><a href="#"> 好友</a></li>
			            <li><a href="#"> 兴趣</a></li>
			          </ul>
			        </div> 

				</li>
				<!-- list -->

				<!-- list -->
				<li class="pull-left">					
					<a href="" class="pull-left"> <img src="./php.jpg" alt="" width="35px" height="35px" > </a>	

					<div class="pull-left">
						<a href=""> <strong> 布尔</strong> 回复你对他的评论</a> <br>
						<p style="color:#90949C;font-size:12px;">
							<i class="icon-comment"></i> 3小时前 <br>
						</p>
					</div>
					
					<!-- 菜单 -->
					<div class="dropdown pull-right" >
			          <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:gray;">  
			          	<span class="icon-angle-down" style="text-decoration:none;"></span>
			          </a>
			          <ul class="dropdown-menu" role="menu">
			            <li><a href="#"> 发消息</a></li>
			            <li><a href="#" > 照片</a></li>
			            <li><a href="#"> 好友</a></li>
			            <li><a href="#"> 兴趣</a></li>
			          </ul>
			        </div> 

				</li>
				<!-- list -->



			</ul>
		</div>		
	</div>
	<!-- comment -->



	<br class="visible-xs">



	<!-- right -->
	<div class="col-sm-3 col-md-3 hidden-xs" style="margin-left:1%;" >
		<div class="right-main">	
			<ul class="nav nav-pills nav-stacked nav-left" role="tablist" style="padding-bottom:1em;">
			  <li><span>可能认识的人</span></li>
			
			<!-- list -->
			  <li role="presentation" class="col-sm-12 col-md-12 col-lg-12"> 
			    <a href="#" class="col-sm-12 col-md-12 col-lg-12">
			      <img src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg" alt="" width="50px" height="50px" class="pull-left">
			      <div class="pull-left" style="position:relative;top:-0.5em;padding-left:0.8em;">
				      <lable> <strong> bool </strong> </lable> <br>
				      <lable style="color:#90949C;">3个共同好友</lable>	<br>
				      <button type="button" class="btn btn-default btn-sm icon-plus" >&nbsp;加为好友 </button>
			      </div>
			      <i class="icon-remove pull-right"></i>
			    </a>
			  </li>
			<!-- list -->
			<!-- list -->
			  <li role="presentation" class="col-sm-12 col-md-12 col-lg-12"> 
			    <a href="#" class="col-sm-12 col-md-12 col-lg-12">
			      <img src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg" alt="" width="50px" height="50px" class="pull-left">
			      <div class="pull-left" style="position:relative;top:-0.5em;padding-left:0.8em;">
				      <lable> <strong> bool </strong> </lable> <br>
				      <lable style="color:#90949C;">3个共同好友</lable>	<br>
				      <button type="button" class="btn btn-default btn-sm icon-plus" >&nbsp;加为好友 </button>
			      </div>
			      <i class="icon-remove pull-right"></i>
			    </a>
			  </li>
			<!-- list -->

			  			  			  
			</ul>					
		</div>	
	</div>
	<!-- right -->



  </div>
  <!-- main -->




</body>
</html>
